<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>DataTable</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.js"></script>
    <style>
        .content {
            margin: 50px auto;
            border: 1px solid #ccc;
        }

        .operation {
            margin: 10px;
        }

        .operation>button {
            margin: 10px;
        }

        #books_length {
            float: left;
            margin-left: 20px;
        }

        #books_filter {
            float: right;
            margin-right: 20px;
        }

        #books {
            margin: 5px;
        }

        .center-block {
            display: block;
            width: 21%;
            margin: auto;
        }
    </style>
</head>

<body>
<section class="content">
    <div class="btn-group operation">
        <button id="btn_add" type="button" class="btn bg-primary">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
    </div>
    <div class="modal fade" id="addBook" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">添加简历</h4>
                </div>
                <div id="addBookModal" class="modal-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label for="nid" class="col-sm-2 control-label">序号:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="nid" type="text" disabled="disabled">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="nname" class="col-sm-2 control-label">姓名:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="nname" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="naddress" class="col-sm-2 control-label">地址:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="naddress" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="nphone" class="col-sm-2 control-label">手机号:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="nphone" type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="center-block">
                        <button id="cancelAdd" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="addBooksInfo" type="button" class="btn btn-success">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="editBookInfo" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">修改简历内容</h4>
                </div>
                <div id="editBookModal" class="modal-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label for="id" class="col-sm-2 control-label">序号:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="id" type="text" disabled="disabled">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">姓名:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="name" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="address" class="col-sm-2 control-label">地址:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="address" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="phone" class="col-sm-2 control-label">手机号:*</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="phone" type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="center-block">
                        <button id="cancelEdit" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-success" onclick="fnEditSave()">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteBook" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">确认要删除吗？</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id="delete" type="button" class="btn btn-danger" data-dismiss="modal">删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框   信息删除确认 -->
    <div class="modal fade" id="delcfmOverhaul">
        <div class="modal-dialog">
            <div class="modal-content message_align">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">提示</h4>
                </div>
                <div class="modal-body">
                    <!-- 隐藏需要删除的id -->
                    <input type="hidden" id="deleteHaulId" />
                    <p id="myWarnInfo"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary"
                            id="deleteHaulBtn">确认</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    </div>
        <!-- /.modal-dialog -->

    <table id="books" class="table table-striped table-bordered row-border hover order-column" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>序列</th>
                <th>名字</th>
                <th>地址</th>
                <th>手机</th>
                <th>操作</th>
            </tr>
        </thead>
    </table>
</section>
</body>
<script>
   $("#books").DataTable({
       language: {
           "sProcessing": "处理中...",
           "sLengthMenu": "显示 _MENU_ 项结果",
           "sZeroRecords": "没有匹配结果",
           "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
           "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
           "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
           "sInfoPostFix": "",
           "sSearch": "搜索:",
           "sUrl": "",
           "sEmptyTable": "表中数据为空",
           "sLoadingRecords": "载入中...",
           "sInfoThousands": ",",
           "oPaginate": {
               "sFirst": "首页",
               "sPrevious": "上页",
               "sNext": "下页",
               "sLast": "末页"
           },
           "oAria": {
               "sSortAscending": ": 以升序排列此列",
               "sSortDescending": ": 以降序排列此列"
           }
       },  //提示信息
       autoWidth: false,  //禁用自动调整列宽
       stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
       processing: true,  //隐藏加载提示,自行处理
       serverSide: true,  //启用服务器端分页
       pagingType: "full_numbers",
       renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
       "bLengthChange": true, //开关，是否显示每页显示多少条数据的下拉框
       "aLengthMenu": [[1,3,5, 10, 25, -1], [1,3,5, 10, 25, "所有"]],//设置每页显示数据条数的下拉选项
       'iDisplayLength': 3, //每页初始显示5条记录
       'bFilter': false,  //是否使用内置的过滤功能（是否去掉搜索框）
       "bInfo": true, //开关，是否显示表格的一些信息(当前显示XX-XX条数据，共XX条)
       "bPaginate": true, //开关，是否显示分页器
       ajax: function (data, callback, settings) {

           //封装请求参数
           var param = {};
           param.pageSize= data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
           param.startIndex = data.start;//开始的记录序号
           param.pageNum = (data.start / data.length);//当前页码
           //获取排序的参数
           console.log(data.order);
           param.order=data.order;
           //ajax请求数据方法
           $.ajax({
               type: "GET",
               url: "/resume",//url请求的地址
               cache: false,  //禁用缓存
               data: param,  //传入组装的参数
               dataType: "json",
               success: function (result) {

                   //封装返回数据重要
                   var returnData = {};
                   //这里直接自行返回了draw计数器,应该由后台返回
                   returnData.draw = data.draw;
                   //返回数据全部记录
                   returnData.recordsTotal = result.totalCount;
                   //后台不实现过滤功能，每次查询均视作全部结果
                   returnData.recordsFiltered = result.totalCount;
                   //返回的数据列表
                   returnData.data = result.data;

                   //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                   //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                   callback(returnData);
               }
           });
       },
       columns:[
           {data:'id'},
           {data:'name'},
           {data:'address'},
           {data:'phone'},
           {data: null,render:function (data, type, row, meta) {
                   var content="<td> <div class='text-left'>";
                   content+="<button type='button' class='btn btn-primary  btn-mini' onclick=\"fnEdit('"+row.id+"')\">编辑</button>";
                   content+="<button type='button' class='btn btn-danger  btn-mini' onclick=\"fnDelete('"+row.id+"')\">删除</button>";
                   content+="</div></td>";
                   return content;
               }},
       ]
   });
   /**
    * 编辑用户信息时显示当前用户信息
    * @param obj
    * @returns
    */
   function fnEdit(obj){
       $.ajax({
           url:"/resume/"+obj,
           type: "GET",
           success:function (data) {
               $("#editBookInfo").modal();
               $("#editBookInfo input[id='id']").val(data.id);
               $("#editBookInfo input[id='name']").val(data.name);
               $("#editBookInfo input[id='address']").val(data.address);
               $("#editBookInfo input[id='phone']").val(data.phone);
           }
       });
   }

   /**
    * 编辑用户信息时显示当前用户信息
    * @param obj
    * @returns
    */
   function fnDelete(obj){
       $("#deleteHaulId").val(obj);
       $("#myWarnInfo").html("您确认要删除该条Id为："+obj+" 的信息吗？");// 将模态框中需要删除的大修的ID设为需要删除的ID
       $("#delcfmOverhaul").modal();
   }

   function fnEditSave() {
       $.ajax({
           url:"/resume",
           type:"POST",
           data:{"id":$("#editBookInfo input[id='id']").val(),
               "name":$("#editBookInfo input[id='name']").val(),
               "address":$("#editBookInfo input[id='address']").val(),
               "phone":$("#editBookInfo input[id='phone']").val()},
           success:function (data) {
               var val = $("#editBookInfo input[id='id']").val();
               if (data!==null && data.id==val){
                   $("#editBookInfo").modal("hide");
                   location.reload()
               }else {
                    alert("修改失败");
                }
           }
       });
   }

   $("#btn_add").click(function(){
       $("#addBook").modal()
   });
   $("#addBooksInfo").on('click', function() {
       $.ajax({
           url:"/resume",
           type:"POST",
           data:{"name":$("#addBook input[id='nname']").val(),
               "address":$("#addBook input[id='naddress']").val(),
               "phone":$("#addBook input[id='nphone']").val()},
           success:function (data) {
               if (data!==null){
                   $("#addBook").modal("hide");
                   location.reload()
               }else {
                   alert("修改失败");
               }
           }
       });
   });


   // 删除大修模态框的确定按钮的点击事件
   $("#deleteHaulBtn").click(function() {
       $.ajax({
           url:"/resume/"+$("#deleteHaulId").val(),
           type:"DELETE",
           success:function () {
               $("#delcfmOverhaul").modal("hide");
               location.reload()
           }
       });
   });
</script>

</html>